import styled from "@emotion/styled"

const ListContainerStyled = styled.div`
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
`

const LeftWrapperStyled = styled.div`
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    text-align: left;
`

const RightWrapperStyled = styled.div`
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
    gap: 4rem;
    text-align: right;
`

const Container: React.FC<React.PropsWithChildren> = (props) => {
    return <ListContainerStyled {...props}>{props.children}</ListContainerStyled>
}

const Left: React.FC<React.PropsWithChildren> = (props) => {
    return <LeftWrapperStyled {...props}>{props.children}</LeftWrapperStyled>
}

interface RightProps {
    style?: React.CSSProperties
    children: React.ReactNode
}

const Right: React.FC<RightProps> = (props) => {
    return <RightWrapperStyled {...props}>{props.children}</RightWrapperStyled>
}

const ItemWrapperStyled = styled.div`
    border-radius: 8rem;
    padding: 12rem 16rem;
    margin-bottom: 8rem;
    background: #ffffff;
    display: flex;
    justify-content: space-between;

    // 待处理状态样式
    &.pending,
    &.paying,
    &.under_review {
        background:
            radial-gradient(
                100% 1134.61% at 0% 50%,
                rgba(255, 136, 0, 0.15) 0%,
                rgba(255, 136, 0, 0) 25%
            ),
            #ffffff;
    }
    // 完成
    &.completed {
        background:
            radial-gradient(
                100% 1134.61% at 0% 50%,
                rgba(62, 234, 119, 0.15) 0%,
                rgba(62, 234, 119, 0) 25%
            ),
            #ffffff;
    }
    // 取消活失败
    &.timeout,
    &.canceled {
        background:
            radial-gradient(
                100% 1134.61% at 0% 50%,
                rgba(255, 71, 117, 0.15) 0%,
                rgba(255, 71, 117, 0) 25%
            ),
            #ffffff;
    }
`

interface ItemWrapperProps {
    className?: string
    children?: React.ReactNode
}

const ItemWrapper: React.FC<ItemWrapperProps> = (props) => {
    const className = props.className?.toLowerCase()
    return (
        <>
            <ItemWrapperStyled
                {...props}
                className={className}
            >
                {props.children}
            </ItemWrapperStyled>
        </>
    )
}

const TooBarStyled = styled.div`
    display: flex;
    gap: 7rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 16rem;
`

interface ToolBarProps {
    children?: React.ReactNode
    style?: React.CSSProperties
}
const ToolBar: React.FC<ToolBarProps> = (props) => {
    return <TooBarStyled>{props.children}</TooBarStyled>
}

export { Container, ItemWrapper, Left, Right, ToolBar }
